<template>
	<view>
		<view class="page">
		   <comp-common v-bind="{data:data}"></comp-common>
		    <comp-header v-bind="{data:data}"></comp-header>
		    <view class="body after-navber">
		        <view style="padding: 0 24upx;background: #fff;margin-bottom: 24upx;">
		            <view class="flex flex-row" style="padding: 24upx 0;border-bottom: 1upx solid #eee;">
		                <view class="flex-grow-1">订单详情</view>
		                <view class="flex-grow-0">状态：{{data.status_text}}</view>
		            </view>
		            <view class="row-list" style="padding: 24upx 0">
		                <view class="flex flex-row">
		                    <view class="flex-grow-0">订单编号：</view>
		                    <view class="flex-grow-1">{{data.order_no}}</view>
		                </view>
		                <view class="flex flex-row">
		                    <view class="flex-grow-0">订单时间：</view>
		                    <view class="flex-grow-1">{{data.order_time}}</view>
		                </view>
		            </view>
		            <view class="flex flex-row" style="padding-bottom: 24upx">
		                <view class="flex-grow-0">
		                    <image :src="data.cover_pic" style="width: 180upx;height: 180upx;border: 1upx solid #eee"></image>
		                </view>
		                <view class="flex-grow-1" style="padding-left: 24upx;color: #888">
		                    <view class="goods-name" style="margin-bottom: 8upx">{{data.name}}</view>
		                    <view class="flex flex-row">
		                        <view class="flex-grow-1" style="font-size: 9pt">
		                            <text v-for="(aitem,aindex) in  data.attr" :key="aindex">{{aitem.attr_group_name}}:{{aitem.attr_name}}</text>
		                        </view>
		                        <view class="flex-grow-0">×{{data.num}}</view>
		                    </view>
		                    <view style="text-align: right;color: #ff4544">￥{{data.total_price}}</view>
		                </view>
		            </view>
		        </view>
		        <view style="padding: 0 24upx;background: #fff;margin-bottom: 24upx;">
		            <view style="padding: 24upx 0;border-bottom: 1upx solid #eee;">售后信息</view>
		            <view class="row-list" style="padding: 24upx 0;">
		                <view class="flex flex-row">
		                    <view class="flex-grow-0">退款编号：</view>
		                    <view class="flex-grow-1">{{data.order_refund_no}}</view>
		                </view>
		                <view class="flex flex-row">
		                    <view class="flex-grow-0">申请时间：</view>
		                    <view class="flex-grow-1">{{data.order_refund_time}}</view>
		                </view>
		                <view class="flex flex-row">
		                    <view class="flex-grow-0">售后类型：</view>
		                    <view class="flex-grow-1">{{data.refund_type}}</view>
		                </view>
		                <view class="flex flex-row">
		                    <view class="flex-grow-0">退款金额：</view>
		                    <view class="flex-grow-1">{{data.refund_price}}</view>
		                </view>
		                <view class="flex flex-row">
		                    <view class="flex-grow-0">申请理由：</view>
		                    <view class="flex-grow-1">
		                        <view>{{data.desc}}</view>
		                        <view style="padding-top: 24upx;font-size: 0" v-if="data.pic_list&&data.pic_list.length">
		                            <image @click="showPicList" :data-pindex="pindex" mode="aspectFill" :src="data.pitem" style="width: 120upx;height: 120upx;margin: 0 8upx 8upx 0;" v-for="(pitem,pindex) in pic_list" wx:for-index="pindex" :key="pindex"></image>
		                        </view>
		                    </view>
		                </view>
		            </view>
		        </view>
		        <view style="padding: 0 24upx;background: #fff;margin-bottom: 24upx;">
		            <view style="padding: 24upx 0;border-bottom: 1upx solid #eee;">收货信息</view>
		            <view class="row-list" style="padding: 24upx 0;">
		                <view class="flex flex-row">
		                    <view class="flex-grow-0">收货人：</view>
		                    <view class="flex-grow-1">{{data.order_refund_no}}</view>
		                </view>
		                <view class="flex flex-row">
		                    <view class="flex-grow-0">申请时间：</view>
		                    <view class="flex-grow-1">{{data.order_refund_time}}</view>
		                </view>
		                <view class="flex flex-row">
		                    <view class="flex-grow-0">售后类型：</view>
		                    <view class="flex-grow-1">{{refund_type}}</view>
		                </view>
		            </view>
		        </view>
		        <view class="bottom-bar" v-if="data.status&&data.status==0">
		            <form bindsubmit="_formIdFormSubmit" class="form-id-form" reportSubmit="true">
		                <button class="form-id-button" formType="submit" style="text-align: right">
		                    <button @click="refundDeny" class="order-item-btn">拒绝</button>
		                    <button @click="refundPass" class="order-item-btn">同意</button>
		                </button>
		            </form>
		        </view>
		    </view>
		    	<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
		
	</view>
</template>

<script>var myVue = {};
	export default {
		data() {
			return {
				data: {
        status: 1,
        show_menu: !1,
        order_list: [],
        no_orders: !1,
        no_more_orders: !1,
		total_price:null,
		num:null
    },
			};
		},
		 onLoad: function(e) {myVue = this;
		    myVue.getApp.page.onLoad(this, e);
		    var t = this;
		    t.setData({
		        id: e.id || 0
		    }), t.getApp.core.showLoading({
		        title: "加载中",
		        mask: !0
		    }), t.getApp.request({
		        url: t.getApp.api.store.order.refund_detail,
		        data: {
		            id: t.data.id
		        },
		        success: function(e) {
		            0 == e.code && t.setData(e.data), 1 == e.code && t.getApp.core.showModal({
		                title: "提示",
		                content: e.msg,
		                showCancel: !1
		            });
		        },
		        complete: function(e) {
		            t.getApp.core.hideLoading();
		        }
		    });
		},
		onReady: function() {
		    myVue.getApp.page.onReady(this);
		},
		onShow: function() {
		    myVue.getApp.page.onShow(this);
		},
		onHide: function() {
		    myVue.getApp.page.onHide(this);
		},
		onUnload: function() {
		    myVue.getApp.page.onUnload(this);
		},
		showPicList: function(e) {
		    myVue.getApp.core.previewImage({
		        urls: this.data.pic_list,
		        current: this.data.pic_list[e.currentTarget.dataset.pindex]
		    });
		},
		methods:{
			 refundPass: function(e) {
			    var t = this, o = t.data.id, p = t.data.type;
			    t.getApp.core.showModal({
			        title: "提示",
			        content: "确认同意" + (1 == p ? "退款？资金将原路返回！" : "换货？"),
			        success: function(e) {
			            e.confirm && (t.getApp.core.showLoading({
			                title: "正在处理",
			                mask: !0
			            }), t.getApp.request({
			                url: t.getApp.api.store.order.refund,
			                method: "post",
			                data: {
			                    id: o,
			                    action: "pass"
			                },
			                success: function(e) {
			                    t.getApp.core.showModal({
			                        title: "提示",
			                        content: e.msg,
			                        showCancel: !1,
			                        success: function(e) {
			                            t.getApp.core.redirectTo({
			                                url: "/" + t.route + "?" + t.getApp.helper.objectToUrlParams(t.options)
			                            });
			                        }
			                    });
			                },
			                complete: function() {
			                    t.getApp.core.hideLoading();
			                }
			            }));
			        }
			    });
			},
			refundDeny: function(e) {
			    var t = this, o = t.data.id;
			    t.getApp.core.showModal({
			        title: "提示",
			        content: "确认拒绝？",
			        success: function(e) {
			            e.confirm && (t.getApp.core.showLoading({
			                title: "正在处理",
			                mask: !0
			            }), t.getApp.request({
			                url: t.getApp.api.store.order.refund,
			                method: "post",
			                data: {
			                    id: o,
			                    action: "deny"
			                },
			                success: function(e) {
			                    t.getApp.core.showModal({
			                        title: "提示",
			                        content: e.msg,
			                        showCancel: !1,
			                        success: function(e) {
			                            t.getApp.core.redirectTo({
			                                url: "/" + t.route + "?" +t.getApp.helper.objectToUrlParams(t.options)
			                            });
			                        }
			                    });
			                },
			                complete: function() {
			                    t.getApp.core.hideLoading();
			                }
			            }));
			        }
			    });
			}
		}
	}
</script>

<style scoped>
.row-list>view {
    margin-bottom: 8upx;
}

.row-list>view:last-child {
    margin-bottom: 0;
}

.row-list>view>.flex-grow-0 {
    min-width: 180upx;
    text-align: right;
}

.goods-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.bottom-bar {
    position: fixed;
    z-index: 10;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 1upx solid #e3e3e3;
    padding: 24upx;
}

.order-item-btn {
    display: inline-block;
    font-size: 9pt;
    height: 60upx;
    line-height: 60upx;
    padding: 0 24upx;
    margin-left: 24upx;
    border: 1upx solid #ccc;
    color: #555;
    border-radius: 8upx;
    background: #fff;
}

.order-item-btn.button-hover {
    opacity: .75;
}

.order-item-btn:after {
    display: none;
}
</style>
